<template>
	<view class="pages">
		<com-head textTit="代付" :typeVal="1" :backType="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 项目 -->
		<view class="goods-box" v-if="details.project">
			<view class="goods" v-for="(item,index) in details.project">
				<image :src="item.project.pic[0]" mode="aspectFill"></image>
				<view>
					<view class="t1">
						{{item.project.name}}
					</view>
					<view class="tt">
						<view v-for="row in item.project.tags">{{row}}</view>
					</view>
					<view class="t2">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
						{{item.duration}}分钟
					</view>
					<view class="price">
						<text class="text"><text>¥</text>{{item.project.price}}</text>
						<text class="left-auto" style="color: #999;">× {{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<!-- <view class="groupList">
			<view class="item">
				<text>支付方式</text>
			</view>
			<view class="items">
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
			</view>
		</view> -->
		
		
		<view class="bottom-buy ">
			<view class="total-price">
				合计：
				<text>¥{{Number(totalPrice).toFixed(2)}} <text v-if="details.freight && details.freight != '0.00'">(含运费：{{details.freight}})</text></text>
			</view>
			
			<view @click="payFun()" class="btn-ho left-auto">支付</view>
		</view>
		
		<!-- <u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view  slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					project_id:'',
					store_id:'',
					number:1,
					coupon_id:'',
					is_vip:'',
					
					staff_id: '',
					staff_sub_id: '',
					
					tech: '',// 技师
					remark: '', // 备注
					name: '',// 姓名
					mobile: '',// 手机
					date: '',// 日期
					time: '', // 时间节点
					user_num:''// 人数
				},
				details:{},
				peoject_id:'',
				num:1,
				payIndex:1,
				totalPrice:0,
				isSubmit:false,
				pay:[{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付',
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
				}],
				out_trade_no: '',
				projectList: [],
				scrollTop: 0,
				orderId: '',
				ordersList: {}
			};
			
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({orderId}) {
			console.log('orderId', orderId)
			if(orderId) {
				this.orderId = orderId
				this.payGetOrders()
			}
			// if(!this.token){
			// 	this.login = true
			// 	return
			// }
		},
		methods:{
			async payGetOrders() {
				let {code,data,msg} = await this.$u.api.payGetOrders({
					id: this.orderId
				});
				console.log('payGetOrders', data,code,msg)
				if(code){
					data.project.forEach(item =>{
						item.project.pic = item.project.pic.split(",")
						item.project.tags = item.project.tags ? item.project.tags.split(",") : []
					})
					this.totalPrice = data.orders_payable
					this.out_trade_no = data.out_trade_no
					this.details = data
				}
			},
			payFun() {
				if (this.out_trade_no) {
					this.wxPayFun()
				}
			},
			async wxPayFun() {
				uni.login({
					success: async (loginRes) => {
						let {code,data,msg} = await this.$u.api.hfAgentPay({
							out_trade_no: this.out_trade_no, 
							pay_type: this.payIndex == 0 ? 1 : this.payIndex == 1 ? 2 : 3,
							code: loginRes.code
						});
						if(!code) this.toast(msg)
						if(code){
							var pls = data
							let that = this
							
							// if(this.payIndex == 0) {
							// 	that.toast("充值成功")
							// 	setTimeout(() => {
							// 		if(that.share_project_id){
							// 			if(that.share_project_id == that.peoject_id){
							// 				that.$u.vuex("share_user_id","")
							// 			}
							// 		}
									
							// 		uni.navigateTo({
							// 			url:`../mine/submitSuccess?type=6&order_id=` + that.orderId
							// 		})
									
									
							// 	}, 500)
							// 	if(this.share_project_id){
							// 		if(this.share_project_id == this.peoject_id){
							// 			this.$u.vuex("share_user_id","")
							// 		}
							// 	}
							// 	return 
							// }
							console.log(3, pls)
							uni.requestPayment({
								provider: "wxpay",
								appid: pls.appId,
								timeStamp: pls.timeStamp,
								nonceStr: pls.nonceStr,
								package: pls.package,
								signType: pls.signType,
								paySign: pls.paySign,
								success(res) {
									console.log(4, res)
									if (res.errMsg == "requestPayment:ok") {
										that.toast("支付成功")
										setTimeout(() => {
											if(that.share_project_id){
												if(that.share_project_id == that.peoject_id){
													that.$u.vuex("share_user_id","")
												}
											}
											
											uni.navigateTo({
												url:`../mine/submitSuccess?type=6&order_id=` + that.orderId + '&negotiation=1'
											})
											
											
										}, 500)
										if(this.share_project_id){
											if(this.share_project_id == this.peoject_id){
												this.$u.vuex("share_user_id","")
											}
										}
									}
								},
								fail(e) {
									if (e.errMsg == "requestPayment:fail cancel") {
										that.toast("支付已取消")
									} else {
										that.toast("支付失败" + e.errMsg)
									}
								},
							});
						}
					},
				})
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #F6F7FA;
	}
</style>
<style lang="scss" scoped>
.pages{
	padding: 50rpx 32rpx 200rpx 32rpx;
	.icon-a-xingzhuang1{
		color: #007664 !important;
	}
	.couponList{
		.list{
			width: 686rpx;
			height: 161rpx;
			position: relative;
			margin-bottom: 20rpx;
			image{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
			}
			.couponContent{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 26rpx 34rpx 31rpx  50rpx;
				.left{
					display: flex;
					.couponL{
						color: #007664;
						margin-right: 52rpx;
						.price{
							font-size: 22rpx;
							line-height: 74rpx;
							text{
								font-size: 53rpx;
							}
						}
						.fullReduction{
							font-size: 22rpx;
						}
					}
					.couponM{
						.t1{
							color: #333333;
							font-size: 24rpx;
							margin-bottom: 14rpx;
							line-height: 33rpx;
							margin-top: 20rpx;
						}
						.t2{
							color: #666666;
							font-size: 17rpx;
						}
					}
				}
				.couponR{
					width: 104rpx;
					border-left: 2rpx dashed rgba(207,11,43,.3);
					height: 137rpx;
					position: relative;
					.icon{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 42rpx;
						color: #979797;
					}
				}
			}
		}
	}
	.chioseTitle{
		text-align: center;
		margin-top: 40rpx;
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.goods-box{
		// margin-top: 15rpx;
		.goods{
			display: flex;
			margin-bottom: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;
			image{
				width: 188rpx;
				height: 188rpx;
				border-radius: 8rpx;
			}
			>view{
				flex: 1;
				// padding: 30rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
				margin-left: 20rpx;
				position: relative;
			}
			.t1{
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #1D2129;
				line-height: 37rpx;
				text{
					font-size: 20rpx;
					font-weight: 400;
					text-align: right;
					color: #999999;
					line-height: 28rpx;
				}
			}
			.tt{
				margin: 10rpx 0;
				view{
					display: inline-block;
					padding: 7rpx 12rpx;
					color: #E8C778;
					border: 1rpx solid #E8C778;
					font-size: 16rpx;
					margin-right: 20rpx;
				}
			}
			.t2{
				display: inline-block;
				padding: 5rpx 8rpx;
				border-radius: 6rpx;
				color: #E8BC88;
				font-size: 16rpx;
				text-align: center;
				background: linear-gradient(135deg, #2D3039 0%, #495057);
				margin-right: 15rpx;
				
				image{
					width: 16rpx;
					height: 16rpx;
					position: relative;
					top: 3rpx;
					margin-right: 10rpx;
				}
			}
			.price{
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				.text{
					width: 100%;
					// border: 1rpx solid red;
					font-size: 32rpx;
					font-weight: 400;
					color: #007664;
					text-align: left;
					line-height: 33rpx;
					letter-spacing: 1px;
					position: absolute;
					left: 0;
					bottom: 0;
				}
				.left-auto{
					position: absolute;
					right: 0;
					bottom: 0;
				}
				.make{
					font-size: 24rpx;
					font-weight: 400;
					color: #007664;
					line-height: 33rpx;
					letter-spacing: 1px;
					margin-right: 18rpx;
				}
				.buy{
					width: 93rpx;
					height: 49rpx;
					background: #d5bc81;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
					line-height: 49rpx;
					letter-spacing: 1px;
				}
			}
		}
		
	}
	
	.card-box{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		.card-zi{
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid hsla(0, 0%, 56%, 0.24);
			&:last-child{
				border: none;
			}
			text{
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 26rpx;
			}
			.hui{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 26rpx;
			}
			.price{
				font-size: 24rpx;
				font-weight: 400;
				color: #007664;
				line-height: 26rpx;
			}
			.noCoupon{
				color: #999999;
				font-size: 24rpx;
			}
		}
	}
	.select-pay{
		padding: 40rpx 43rpx;
		.title{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 38rpx;
		}
		.select{
			display: flex;
			align-items:center;
			margin-bottom: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			.iconfont{
				padding: 10rpx 20rpx;
			}
			.icon-a-xingzhuang1{
				color: rgba(209,184,125,1);
			}
		}
		.price-box{
			border-top: 1px solid #d8d8d8;
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
			}
			.btn{
				margin-left: auto;
				width: 236rpx;
				height: 70rpx;
				background: #007664;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// @if env(safe-area-inset-bottom)!=0{
		// 	padding: 35rpx 35rpx env(safe-area-inset-bottom);
		// }@else{
			padding: 35rpx;
		// }
		display: flex;
		align-items: center;
		background-color: #fff;
		.total-price{
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				color: #007664;
				line-height: 42rpx;
				text{
					font-size: 24rpx;
					color: #666666;
					margin-left: 7rpx;
				}
			}
		}
		.btn-bai{
			width: 174rpx;
			height: 70rpx;
			border: 1px solid #007664;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #007664;
			display: flex;
			justify-content: center;
			align-items: center;
			// text-align: center;
			// line-height: 70rpx;
		}
		.btn-ho{
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #50DCC2 0%, #007664 );
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 400;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.payForAnother{
	position: absolute;
	right: 280rpx;
	top: 40rpx;
	button{
		border: none !important;
		background: none;
		border-radius: none;
		margin: 0;
		padding: 0;
		font-size: 30rpx;
		font-weight: 400;
		color:#007664;
	}
	button::after{
		border: none !important;
		background: none;
		border-radius: none;
		margin: 0;
		padding: 0;
	}
	
}
	::v-deep .u-icon-minus{
		background: #ededed !important;
		color: #b9b9b9!important;
	}	
	
	
	.groupList{
		width: 100%;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin: 20rpx 0 34rpx 0;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			color: #333333;
			font-size: 26rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			position: relative;
			.image{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: relative;
				top: 5rpx;
				margin-right: 19rpx;
			}
			.imgs{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: absolute;
				right: 0;
			}
			.right{
				font-size: 24rpx;
				display: flex;
				align-items: center;
				text{
					margin-right: 32rpx;
				}
			}
		}
		.items{
			// padding: 40rpx 43rpx;
			// padding-top: 28rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
				margin-bottom: 38rpx;
			}
			.select{
				display: flex;
				align-items:center;
				// margin-bottom: 36rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 40rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				padding: 28rpx 0;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				.iconfont{
					padding: 10rpx 20rpx;
				}
				.icon-a-xingzhuang1{
					color: #007664;
				}
				&:last-child{
					border: none;
				}
			}
			.price-box{
				border-top: 1px solid #d8d8d8;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 42rpx;
				>text{
					font-size: 30rpx;
					font-weight: 400;
					text-align: left;
					color: #007664;
					line-height: 42rpx;
					text{
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
					}
				}
				.btn{
					margin-left: auto;
					width: 236rpx;
					height: 70rpx;
					background: #007664;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.item:last-child{
			border-bottom: 1rpx solid #F6F7FA;
		}
	}
	.takeMain{
		margin-top: 10rpx;
		&-view{
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			background: white;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			&-main{
				width: 100%;
				margin-left: 16rpx;
				.title{
					font-size: 24rpx;
					color: #666666;
					padding: 20rpx 0 0 0;
				}
				.site{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					text{
						flex: 1;
						&:last-child{
							text-align: right;
						}
					}
				}
				.default{
					display: inline-block;
					width: 72rpx;
					height: 36rpx;
					background: #32C2B3;
					border-radius: 6rpx;
					color: white;
					line-height: 36rpx;
					text-align: center;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					position: relative;
					top: -3rpx;
				}
			}
		}
	}
	
</style>
